.protlet-border {
  background-color: #ffffff;
  border-radius: 2px;
  -webkit-box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.1);
  -moz-box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.1);
  box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.1);
  margin-bottom: 15px;

  .border-header {
    height: 60px;
    line-height: 60px;
    padding: 0px 18px;
    border-bottom: 1px solid #ebedf2;

    .border-header-icon {
      margin-right: 4px;
      width: 20px;
      height: 20px;
      margin-right: 9px;
      vertical-align: middle;
      line-height: 18px;
      font-size: 24px;
    }

    i {
      font-size: 24px;
    }

    .border-header-title {
      font-size: 16px;
      font-family: 'PingFang SC';
      font-weight: 700;
      vertical-align: middle;
    }

    .border-header-desc {
      margin-top: 2px;
      height: 13px;
      line-height: 13px;
      padding: 0px 8px;
      color: #999999;
      border-left: 1px solid #d9d8d8;
      font-size: 12px;
      background-blend-mode: color-dodge;
    }
  }
}

@mixin widget_border($name, $color, $text-color) {
  .protlet-border__#{$name} {
    .border-header {
      background: $color;

      .border-header-title {
        color: $text-color;
      }

      .border-header-desc {
        color: $text-color;
      }
    }
  }
}

@each $name,
$colors in $component-colors {
  @include widget_border($name, map-get($colors, base), map-get($colors, font));
}

@each $name,
$colors in $theme-colors {
  @include widget_border($name, map-get($colors, base), map-get($colors, font));
}
